<div
  ngAccordionGroup
  class="example-accordion-group"
  [multiExpandable]="true"
  [softDisabled]="false"
>
  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
        Item 1 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item1" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 1.</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
        Item 2 Trigger (disabled)
        <mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item2" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 2. This should not be reachable or expandable.</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
        Item 3 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item3" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 3.</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
        Item 4 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item4" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 4</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
        Item 5 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item5" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 5</p>
      </ng-template>
    </div>
  </div>
</div>
